<template>
    <div class="myWeather">
      <div class="myWeatherTop">
        <span>我的天气</span>
      </div>
      <!-- 所选城市当前 天气、风向、湿度   start -->
      <div class="myWeatherMain">
        <div class="cityBar">
          <i class="imgIcon dingwei dis"></i>
          <span class="province" id="cityName">成都</span>
          <a id="cityNameHref" href="javascript:void(0);"></a>
          <img src="http://i.tq121.com.cn/i/weather2017/selectCityBtnCur.png" class="dis">
          <div class="updataTimeDiv">
            <span class="updataTime" id="updataTime">{{ updataTime }}</span>
            <span class="updataTimeW">更新</span>
          </div>
        </div>
        <div class="skInfo" style="display: block;">
          <div class="temp">
            <!-- 当前城市气温 -->
            <span class="tempNum" id="temp" n="101270101">{{ tempNow }}</span>
            <span class="tempDu">℃</span>
          </div>
          <div class="otherWeather">
            <div class="weatherRow aaa" style="margin-top: 0px; left: 0px; display: block;">
              <a class="zdwr" href="http://www.weather.com.cn/air/?city=101270101" target="_blank" style="display: none;">
                <span id="aqi">?</span><span id="aqis"></span>
              </a>
            </div>
            <div class="weatherRow" style="display: block;">
              <i class="imgIcon feng"></i>
              <img class="skimgsm" src="https://i.i8tq.com/mysky/skwind.png" alt="">
              <span id="windD">{{ windDir }}</span>
              <span id="windS">{{ windScale }}</span>
            </div>
            <div class="weatherRow" style="display: block;">
              <i class="imgIcon sd"></i>
              <img class="skimgsm" src="https://i.i8tq.com/mysky/sksd.png" alt="">
              <span>相对湿度</span>
              <span id="sd">{{ humidity }}</span>
            </div>
          </div>
          <!-- 天气预测  start -->
  
          <!-- 天气预测  end -->
        </div>
        <div class="trend">
          <div class="dataRow">
            <div class="dataLi todayLi" id="dayInfo0">{{ weekNum }}</div>
            <div class="dataLi" id="dayInfo1">{{ weekdays[otherWeekday[0]] }}</div>
            <div class="dataLi" id="dayInfo2">{{ weekdays[otherWeekday[1]] }}</div>
            <div class="dataLi" id="dayInfo3">{{ weekdays[otherWeekday[2]] }}</div>
            <div class="dataLi" id="dayInfo4">{{ weekdays[otherWeekday[3]] }}</div>
          </div>
          <div class="dataRow" style="margin-top: 10px;">
            <div class="dataImg"><i :class="iconDay[0]" id="dayDImg0"></i></div>
            <div class="dataImg"><i :class="iconDay[1]" id="dayDImg1"></i></div>
            <div class="dataImg"><i :class="iconDay[2]" id="dayDImg2"></i></div>
            <div class="dataImg"><i :class="iconDay[3]" id="dayDImg3"></i></div>
            <div class="dataImg"><i :class="iconDay[4]" id="dayDImg4"></i></div>
  
          </div>
          <div class="tqzsDiv">
            <div id="topTemp" style="position: relative; height: 60px;">
              <div id="base-echart" class="base-echart" style="width:340px; height: 70px;line-height:70px"></div>
            </div>
            <div id="lowTemp" style="position: relative ; top: -10px;">
              <div id="base-echart-two" class="base-echart-two" style="width:340px; height: 75px;line-height:70px"></div>
            </div>
          </div>
          <div class="dataRow">
            <div class="dataImg"><i :class="iconNight[0]" id="dayNImg0"></i></div>
            <div class="dataImg"><i :class="iconNight[0]" id="dayNImg1"></i></div>
            <div class="dataImg"><i :class="iconNight[0]" id="dayNImg2"></i></div>
            <div class="dataImg"><i :class="iconNight[0]" id="dayNImg3"></i></div>
            <div class="dataImg"><i :class="iconNight[0]" id="dayNImg4"></i></div>
          </div>
          <div class="dataRow">
            <div class="weatherLi" id="cloud0">无持续风向</div>
            <div class="weatherLi" id="cloud1">无持续风向</div>
            <div class="weatherLi" id="cloud2">无持续风向</div>
            <div class="weatherLi" id="cloud3">无持续风向</div>
            <div class="weatherLi" id="cloud4">无持续风向</div>
          </div>
          <div class="dataRow" style="margin-top: 0px;">
            <div class="weatherLi" id="cloudLevel0">&lt;3级</div>
            <div class="weatherLi" id="cloudLevel1">&lt;3级</div>
            <div class="weatherLi" id="cloudLevel2">&lt;3级</div>
            <div class="weatherLi" id="cloudLevel3">&lt;3级</div>
            <div class="weatherLi" id="cloudLevel4">&lt;3级</div>
          </div>
        </div>
        <a href="http://www.weather.com.cn/weather40d/101270101.shtml" target="_blank" id="showCalendar">
          <div class="showCalendar">15天预报</div>
        </a>
        <div class="zsList">
          <div class="zsLi">
            <div class="zsDiv imgIcon zwxIcon"></div>
            <p>紫外线指数</p>
            <span id="zwxInfo">{{ intensity }}</span>
          </div>
          <div class="zsLi hot" id="chuanyi">
            <div class="zsDiv imgIcon cyIcon cyIcon2"></div>
            <p>穿衣指数</p>
            <span id="cyInfo">{{ clothes }}</span>
          </div>
          <div class="zsLi">
            <div class="zsDiv imgIcon xcIcon"></div>
            <p>洗车指数</p>
            <span id="xcInfo">{{ carWashIndex }}</span>
          </div>
          <div class="zsLi lastLi">
            <div class="zsDiv imgIcon gmIcon"></div>
            <p>感冒指数</p>
            <span id="gmInfo">{{ infect }}</span>
          </div>
        </div>
      </div>
      <!-- 所选城市当前 天气、风向、湿度   end -->
  
    </div>
  </template>
  
  <script>
  import api from '../plugins/index';
  import * as echarts from "echarts"
  export default {
    name:'WeaherReport',
    data() {
      return {
        city: "成都",
        weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        weatherData: '',
        tempNow: null,
        windDir: null,
        windScale: null,
        humidity: null,
        weekDay: '',
        weekNum: '',
        dayOfWeek: '',
        date: '',
        otherWeekday: [],
        chart: null,
        updataTime: '',
        // 最高气温数组
        tempMaxDatas: [],
        tempMinDatas: [],
        weatherDataOfseven: '',
        fxDate: [],
        DayOfWeek: '',
        iconDay: [],
        iconNight: [],
        uvIndex: '',
        intensity: '',
        clothes: '',
        carWashIndex: '',
        infect: '少发', 
        feakDatas: {
          "code": "200",
          "updateTime": "2023-05-05T21:35+08:00",
          "fxLink": "https://www.qweather.com/weather/chengdu-101270101.html",
          "daily": [{
            "fxDate": "2023-05-05",
            "sunrise": "06:14",
            "sunset": "19:48",
            "moonrise": "19:22",
            "moonset": "05:48",
            "moonPhase": "盈凸月",
            "moonPhaseIcon": "803",
            "tempMax": "26",
            "tempMin": "16",
            "iconDay": "104",
            "textDay": "阴",
            "iconNight": "305",
            "textNight": "小雨",
            "wind360Day": "213",
            "windDirDay": "西南风",
            "windScaleDay": "1-2",
            "windSpeedDay": "11",
            "wind360Night": "0",
            "windDirNight": "北风",
            "windScaleNight": "1-2",
            "windSpeedNight": "3",
            "humidity": "85",
            "precip": "0.0",
            "pressure": "947",
            "vis": "24",
            "cloud": "25",
            "uvIndex": "3"
          }, {
            "fxDate": "2023-05-06",
            "sunrise": "06:13",
            "sunset": "19:49",
            "moonrise": "20:27",
            "moonset": "06:21",
            "moonPhase": "满月",
            "moonPhaseIcon": "804",
            "tempMax": "28",
            "tempMin": "15",
            "iconDay": "101",
            "textDay": "多云",
            "iconNight": "305",
            "textNight": "小雨",
            "wind360Day": "0",
            "windDirDay": "北风",
            "windScaleDay": "1-2",
            "windSpeedDay": "3",
            "wind360Night": "0",
            "windDirNight": "北风",
            "windScaleNight": "1-2",
            "windSpeedNight": "3",
            "humidity": "80",
            "precip": "0.0",
            "pressure": "953",
            "vis": "24",
            "cloud": "25",
            "uvIndex": "11"
          }, {
            "fxDate": "2023-05-07",
            "sunrise": "06:12",
            "sunset": "19:50",
            "moonrise": "21:34",
            "moonset": "07:02",
            "moonPhase": "亏凸月",
            "moonPhaseIcon": "805",
            "tempMax": "24",
            "tempMin": "14",
            "iconDay": "101",
            "textDay": "多云",
            "iconNight": "305",
            "textNight": "小雨",
            "wind360Day": "0",
            "windDirDay": "北风",
            "windScaleDay": "1-2",
            "windSpeedDay": "3",
            "wind360Night": "0",
            "windDirNight": "北风",
            "windScaleNight": "1-2",
            "windSpeedNight": "3",
            "humidity": "90",
            "precip": "0.0",
            "pressure": "955",
            "vis": "23",
            "cloud": "25",
            "uvIndex": "3"
          }, {
            "fxDate": "2023-05-08",
            "sunrise": "06:12",
            "sunset": "19:51",
            "moonrise": "22:42",
            "moonset": "07:49",
            "moonPhase": "亏凸月",
            "moonPhaseIcon": "805",
            "tempMax": "18",
            "tempMin": "14",
            "iconDay": "305",
            "textDay": "小雨",
            "iconNight": "305",
            "textNight": "小雨",
            "wind360Day": "0",
            "windDirDay": "北风",
            "windScaleDay": "1-2",
            "windSpeedDay": "3",
            "wind360Night": "0",
            "windDirNight": "北风",
            "windScaleNight": "1-2",
            "windSpeedNight": "3",
            "humidity": "94",
            "precip": "1.0",
            "pressure": "954",
            "vis": "20",
            "cloud": "55",
            "uvIndex": "3"
          }, {
            "fxDate": "2023-05-09",
            "sunrise": "06:11",
            "sunset": "19:51",
            "moonrise": "23:47",
            "moonset": "08:46",
            "moonPhase": "亏凸月",
            "moonPhaseIcon": "805",
            "tempMax": "18",
            "tempMin": "14",
            "iconDay": "305",
            "textDay": "小雨",
            "iconNight": "305",
            "textNight": "小雨",
            "wind360Day": "0",
            "windDirDay": "北风",
            "windScaleDay": "1-2",
            "windSpeedDay": "3",
            "wind360Night": "0",
            "windDirNight": "北风",
            "windScaleNight": "1-2",
            "windSpeedNight": "3",
            "humidity": "92",
            "precip": "1.0",
            "pressure": "959",
            "vis": "24",
            "cloud": "55",
            "uvIndex": "3"
          }, {
            "fxDate": "2023-05-10",
            "sunrise": "06:10",
            "sunset": "19:52",
            "moonrise": "",
            "moonset": "09:51",
            "moonPhase": "亏凸月",
            "moonPhaseIcon": "805",
            "tempMax": "21",
            "tempMin": "15",
            "iconDay": "104",
            "textDay": "阴",
            "iconNight": "104",
            "textNight": "阴",
            "wind360Day": "0",
            "windDirDay": "北风",
            "windScaleDay": "1-2",
            "windSpeedDay": "3",
            "wind360Night": "0",
            "windDirNight": "北风",
            "windScaleNight": "1-2",
            "windSpeedNight": "3",
            "humidity": "73",
            "precip": "0.0",
            "pressure": "960",
            "vis": "24",
            "cloud": "25",
            "uvIndex": "9"
          }, {
            "fxDate": "2023-05-11",
            "sunrise": "06:09",
            "sunset": "19:53",
            "moonrise": "00:45",
            "moonset": "11:01",
            "moonPhase": "亏凸月",
            "moonPhaseIcon": "805",
            "tempMax": "24",
            "tempMin": "16",
            "iconDay": "104",
            "textDay": "阴",
            "iconNight": "306",
            "textNight": "中雨",
            "wind360Day": "0",
            "windDirDay": "北风",
            "windScaleDay": "1-2",
            "windSpeedDay": "3",
            "wind360Night": "0",
            "windDirNight": "北风",
            "windScaleNight": "1-2",
            "windSpeedNight": "3",
            "humidity": "58",
            "precip": "0.0",
            "pressure": "959",
            "vis": "25",
            "cloud": "25",
            "uvIndex": "12"
          }],
          "refer": {
            "sources": ["QWeather", "NMC", "ECMWF"],
            "license": ["CC BY-SA 4.0"]
          }
        }
      }
    },
    methods: {
      getWeekDay(time) {
        // 创建一个 Date 对象，传入要判断的日期字符串
        const date = new Date(time);
        // 获取该日期对应的星期几
        const dayOfWeek = date.getDay();
        this.dayOfWeek = dayOfWeek
        this.getOtherWeekDay(this.dayOfWeek)
        // 将星期几转换为文字描述
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const weekdayText = weekdays[dayOfWeek];
        this.weekNum = weekdayText
        console.log(this.weekNum)
      },
      getOtherWeekDay(dayofweek) {
        if (dayofweek === 6) {
          this.otherWeekday[0] = 0
          this.otherWeekday[1] = 1
          this.otherWeekday[2] = 2
          this.otherWeekday[3] = 3
        } else if (dayofweek === 5) {
          this.otherWeekday[0] = 6
          this.otherWeekday[1] = 0
          this.otherWeekday[2] = 1
          this.otherWeekday[3] = 2
        } else if (dayofweek === 4) {
          this.otherWeekday[0] = 5
          this.otherWeekday[1] = 6
          this.otherWeekday[2] = 0
          this.otherWeekday[3] = 1
        } else if (dayofweek === 3) {
          this.otherWeekday[0] = 4
          this.otherWeekday[1] = 5
          this.otherWeekday[2] = 6
          this.otherWeekday[3] = 0
        } else if (dayofweek === 2) {
          this.otherWeekday[0] = 3
          this.otherWeekday[1] = 4
          this.otherWeekday[2] = 5
          this.otherWeekday[3] = 6
        } else if (dayofweek === 1) {
          this.otherWeekday[0] = 2
          this.otherWeekday[1] = 3
          this.otherWeekday[2] = 4
          this.otherWeekday[3] = 5
        } else {
          this.otherWeekday[0] = 1
          this.otherWeekday[1] = 2
          this.otherWeekday[2] = 3
          this.otherWeekday[3] = 4
        }
      },
      getMainDatas() {
        console.log("flag001")
        console.log(this.weatherDataOfseven)
        // this.weatherDataOfseven = this.feakDatas
        this.tempMaxDatas[0] = this.weatherDataOfseven.daily[0].tempMax
        this.tempMaxDatas[1] = this.weatherDataOfseven.daily[1].tempMax
        this.tempMaxDatas[2] = this.weatherDataOfseven.daily[2].tempMax
        this.tempMaxDatas[3] = this.weatherDataOfseven.daily[3].tempMax
        this.tempMaxDatas[4] = this.weatherDataOfseven.daily[4].tempMax
        // ---------------------------------------------------
        this.tempMinDatas[0] = this.weatherDataOfseven.daily[0].tempMin
        this.tempMinDatas[1] = this.weatherDataOfseven.daily[1].tempMin
        this.tempMinDatas[2] = this.weatherDataOfseven.daily[2].tempMin
        this.tempMinDatas[3] = this.weatherDataOfseven.daily[3].tempMin
        this.tempMinDatas[4] = this.weatherDataOfseven.daily[4].tempMin
        // 
  
        console.log(this.tempMaxDatas)
        // // 1. 获取到7天的天气数据,并取出日期
        // this.weatherDataOfseven = this.feakDatas
        // // 2. 算出每个日期对应星期几
        // this.fxDate[0] = this.weatherDataOfseven.daily[0].fxDate
        // console.log("flag001")
        // // 创建一个 Date 对象，传入要判断的日期字符串
        // const date = new Date(this.fxDate[0]);
        // const dayOfWeek = date.getDay();
        // console.log(dayOfWeek + 'flag001')
        // 3. 把每日最高气温存放到一个数组中，数组tempMaxDatas[0]为今天的 tempMaxDatas[1]为明天的依次类推
  
      },
      // Echarts数据处理部分
      initChart() {
        this.chart1 = echarts.init(document.getElementById("base-echart"));
  
        this.chart1.setOption({
  
          xAxis: {
            show: false,
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri"],
          },
          yAxis: {
            show: false,
            type: "value",
          },
          grid: {
            show: false // 隐藏背景横线
          },
          series: [
            {
              data: this.tempMaxDatas,
              type: "line",
              symbol: 'circle', // 将圆点改为实心填充
              symbolSize: 5,// 修改圆点大小
  
              lineStyle: {
                width: 1,
                color: "#ee8c30",
              },
              itemStyle: {
                color: "#ee8c30"
              },
              textStyle: {
                fontSize: 12,
                color: '#333'
              },
              label: {
                show: true,
                position: 'bottom',
              }
            }
          ],
        });
        //渲染第二个折线图 
        this.chart2 = echarts.init(document.getElementById("base-echart-two"));
        this.chart2.setOption({
  
          xAxis: {
            show: false,
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri"],
          },
          yAxis: {
            show: false,
            type: "value",
          },
          grid: {
            show: false // 隐藏背景横线
          },
          series: [
            {
              data: this.tempMinDatas,
              type: "line",
              symbol: 'circle', // 将圆点改为实心填充
              symbolSize: 5,// 修改圆点大小
              lineStyle: {
                width: 1,
                color: "#95c2f4",
              },
              itemStyle: {
                color: "#95c2f4"
              },
              textStyle: {
                fontSize: 12,
                color: '#333'
              },
              label: {
                show: true,
                position: 'bottom',
  
              }
            }
          ],
        });
      },
      // 处理每日天气对应icon
      getDayicon() {
        // this.weatherDataOfseven = this.feakDatas
        console.log(this.weatherDataOfseven.updateTime)
        const date = new Date(this.weatherDataOfseven.updateTime);
        const timeString = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        this.updataTime = timeString
        console.log(timeString); // 输出：12:34
  
        // --------------------------dayicon---------------------------------
        this.iconDay[0] = 'qi-' + this.weatherDataOfseven.daily[0].iconDay
        this.iconDay[1] = 'qi-' + this.weatherDataOfseven.daily[1].iconDay
        this.iconDay[2] = 'qi-' + this.weatherDataOfseven.daily[2].iconDay
        this.iconDay[3] = 'qi-' + this.weatherDataOfseven.daily[3].iconDay
        this.iconDay[4] = 'qi-' + this.weatherDataOfseven.daily[4].iconDay
        // --------------------------nighticon-------------------------------
        this.iconNight[0] = 'qi-' + this.weatherDataOfseven.daily[0].iconNight
        this.iconNight[1] = 'qi-' + this.weatherDataOfseven.daily[1].iconNight
        this.iconNight[2] = 'qi-' + this.weatherDataOfseven.daily[2].iconNight
        this.iconNight[3] = 'qi-' + this.weatherDataOfseven.daily[3].iconNight
        this.iconNight[4] = 'qi-' + this.weatherDataOfseven.daily[4].iconNight
      },
      // 处理每天的紫外线强度
      getUvInedx() {
        this.uvIndex = this.weatherDataOfseven.daily[0].uvIndex
        if (this.uvIndex <= 2) {
          this.intensity = '弱'
        } else if (this.uvIndex <= 5) {
          this.intensity = '较强'
        } else if (this.uvIndex <= 7) {
          this.intensity = '强'
        } else if (this.uvIndex <= 10) {
          this.intensity = '极强'
        } else {
          this.intensity = '危险'
        }
      },
      // 处理每天的穿衣指数
      getClothes() {
        this.clothes = this.weatherDataOfseven.daily[0].tempMax
        // console.log(this.clothes)
        if (this.clothes <= 10) {
          this.clothes = '羽绒服'
        } else if (this.clothes <= 18) {
          this.clothes = '外套'
        } else if (this.clothes <= 23) {
          this.clothes = '衬衫'
        } else if (this.clothes <= 26) {
          this.clothes = 'T恤'
        } else {
          this.clothes = '薄单衣'
        }
      },
      // 处理每天的洗车推荐程度
      getCarWashIndex() {
        this.carWashIndex = this.weatherDataOfseven.daily[0].textDay
        // console.log(this.clothes)
        if (this.carWashIndex === '晴' || this.carWashIndex === '多云') {
          this.carWashIndex = '适宜'
        } else {
          this.carWashIndex = '不宜'
        }
      }
  
  
    },
    mounted() {
      api.getSomeData().then(response => {
        this.weatherData = response.data;
        this.tempNow = this.weatherData.now.temp
        this.windDir = this.weatherData.now.windDir
        this.windScale = this.weatherData.now.windScale
        this.humidity = this.weatherData.now.humidity
        this.weekDay = this.weatherData.now.obsTime
        console.log('当前气温为：' + this.tempNow)
        console.log('当前风向为：' + this.windDir)
        console.log('当前风力等级为：' + this.windScale)
        console.log('当前湿度为：' + this.humidity)
        console.log('当前时间为：' + this.weekDay)
        this.getWeekDay(this.weekDay);
      });
      // 获取未来7天内的天气数据，并进行数据操作
      api.getSevenData().then(response => {
        this.weatherDataOfseven = response.data
        console.log('-----------------------------------------')
        console.log(this.weatherDataOfseven)
        console.log('-----------------------------------------')
        this.getMainDatas();
        this.initChart();
        this.getDayicon();
        this.getUvInedx();
        this.getClothes();
        this.getCarWashIndex()
      })
    }
  }
  </script>
  
  <style scoped>
  * {
    padding: 0;
    margin: 0;
    border: 0;
  }
  
  .myWeather {
    width: 300px;
    /* margin: 15px auto; */
  
  }
  
  .myWeatherTop {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #043567;
  }
  
  .myWeatherTop span {
    font-size: 18px;
    margin-left: 15px;
    color: #fff;
    float: left;
    display: inline;
    font-weight: bold;
  }
  
  .myWeatherMain {
    width: 270px;
    margin-left: 15px;
    position: relative;
  }
  
  .myWeatherMain .cityBar {
    width: 100%;
    height: 40px;
    line-height: 45px;
  }
  
  .myWeatherMain .cityBar .province {
    color: #252525;
    display: block;
    float: left;
    font-size: 16px;
    margin-left: 15px;
    height: 35px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100px;
  }
  
  #cityNameHref {
    display: block;
    width: 28px;
    height: 14px;
    background: url(https://i.tq121.com.cn/i/weather2017/selectCityBtn.png) no-repeat;
    float: left;
    margin-top: 18px;
    margin-left: 5px;
  }
  
  .myWeatherMain .cityBar img:hover {
    display: block
  }
  
  .dis {
    display: none;
  }
  
  fieldset,
  img {
    border: 0;
    vertical-align: middle;
  }
  
  .updataTimeDiv {
    margin-right: 80px;
  }
  
  .updataTimeDiv {
    float: right;
    margin-right: 65px;
    height: 45px;
    line-height: 50px;
  }
  
  .updataTime {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: right;
    font-size: 12px;
    color: #7d7d7d;
    margin-top: 5px;
    margin-left: 5px;
  }
  
  .updataTimeW {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: right;
    font-size: 12px;
    color: #7d7d7d;
    margin-top: 5px;
  }
  
  
  .skInfo {
    width: 100%;
    float: left;
    border-bottom: 1px solid #dfdfdf;
  }
  
  .temp {
    width: 160px;
    float: left;
    margin-left: 0;
    text-align: center;
  }
  
  .temp .tempNum {
    font-size: 80px;
    color: #043567;
    float: none;
    height: 110px;
  }
  
  .temp span {
    font-size: 22px;
    color: #043567;
    float: none;
    cursor: pointer;
  }
  
  .temp .tempDu {
    position: relative;
    top: -44px;
    left: -5px;
  }
  
  .temp span {
    font-size: 22px;
    color: #043567;
    float: none;
    cursor: pointer;
  }
  
  .otherWeather {
    width: 109px;
    float: right;
    margin-top: -10px
  }
  
  .base-echart {
    position: absolute;
    top: 6px;
    left: -35px;
    margin: 0 auto;
  }
  
  .base-echart-two {
    position: absolute;
    top: 6px;
    left: -35px;
    margin: 0 auto;
  }
  
  .aaa {
    padding-top: 25px;
    padding-bottom: 8px;
  }
  
  .weatherRow {
    width: 100%;
    text-align: left;
    font-size: 12px;
    height: 17px;
    display: none;
    cursor: pointer;
  }
  
  .trend {
    width: 100%;
    float: left;
    padding-top: 15px;
    cursor: pointer;
  }
  
  .trend .dataRow {
    width: 100%;
    float: left;
    margin-top: 5px;
  }
  
  
  
  .trend .dataRow .dataLi {
    width: 20%;
    float: left;
    text-align: center;
    font-size: 12px;
    color: #252525;
    margin-bottom: 5px;
  }
  
  .trend .dataRow .todayLi {
    color: #1f6ebd;
  }
  
  .trend .dataRow {
    width: 100%;
    float: left;
    margin-top: 5px;
  }
  
  .trend .dataRow .dataImg {
    width: 20%;
    float: left;
    text-align: center;
    font-size: 12px;
    color: #252525;
  }
  
  .trend .dataRow .dataImg i {
    color: #357ccd;
    font-size: 25px;
  }
  
  big.d01 {
    background-position: -80px 0;
  }
  
  big.d02 {
    background-position: -160px 0;
  }
  
  big.d07 {
    background-position: -560px 0;
  }
  
  
  
  big.png40 {
    background-image: url(https://i.tq121.com.cn/i/weather2015/index/blue30.png);
    height: 30px;
    width: 30px;
  }
  
  big {
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: -640px 240px;
    display: block;
  }
  
  .trend .tqzsDiv {
    width: 100%;
    height: 105px;
    float: left;
    margin-top: 10px;
    display: inline;
  }
  
  .trend .dataRow {
    width: 100%;
    float: left;
    margin-top: 5px;
  }
  
  .trend .dataRow .dataImg {
    width: 20%;
    float: left;
    text-align: center;
    font-size: 12px;
    color: #252525;
  }
  
  .trend .dataRow big {
    color: #357ccd;
    font-size: 25px;
  }
  
  big {
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: -640px 240px;
    display: block;
  }
  
  big.n07 {
    background-position: -560px -320px;
  }
  
  big.png40 {
    background-image: url(https://i.tq121.com.cn/i/weather2015/index/blue30.png);
    height: 30px;
    width: 30px;
  }
  
  .trend .dataRow .weatherLi {
    width: 20%;
    float: left;
    text-align: center;
    font-size: 12px;
    color: #7d7d7d;
  }
  
  .showCalendar {
    width: 240px;
    height: 30px;
    line-height: 30px;
    background: #fbfbfd;
    color: #1f6ebd;
    font-size: 14px;
    text-align: center;
    float: left;
    margin-left: 15px;
    border-radius: 20px;
    margin-bottom: 18px;
    border: 1px solid #93bade;
    margin-top: 15px;
    display: inline;
  }
  
  .zsList {
    float: left;
    width: 100%;
    margin-bottom: 0;
  }
  
  .zsLi {
    float: left;
    width: 65px;
    height: 87px;
    margin-right: 3px;
    background: #6381a1;
    text-align: center;
    display: inline;
  }
  
  .zsLi .zsDiv {
    width: 32px;
    height: 33px;
    position: relative;
    margin: 5px 0;
    left: 16px;
    *left: 0;
    _left: 0;
  }
  
  .zsLi p {
    font-size: 10px;
    color: #c3dcf4;
  }
  
  .zsLi span {
    font-size: 14px;
    color: #fff;
  }
  
  .zsList .zsLi .zwxIcon {
    height: 33px;
    width: 32px;
    background-position: -320px -414px;
  }
  
  .cyIcon2 {
    background: url(http://i.i8tq.com/weather2018/cy/pc/index/2.png?20180606) no-repeat center center;
    width: 30px !important;
  }
  
  .zsList .zsLi .cyIcon {
    height: 33px;
    width: 32px;
    background-position: -428px -416px;
  }
  
  .zsList .zsLi .xcIcon {
    height: 33px;
    width: 32px;
    background-position: -371px -415px;
  }
  
  .zsList .zsLi .gmIcon {
    height: 33px;
    width: 32px;
    background-position: -471px -416px;
  }
  
  .imgIcon {
    background: url(http://i.i8tq.com/index/indexImg_gl.png) no-repeat;
  }
  
  .lastLi {
    margin-right: 0;
  }
  </style>